<!DOCTYPE html>
<html>

<body>
  <!-- 创建canvas画布 -->
  <canvas id="c1" width="800" height="600">
  </canvas>
  <canvas id="c2" width="800" height="600">
  </canvas>
  <script>
    // 获取canvas 2d 图像上下文
    var painter = document.getElementById('c1');
    var c1 = painter.getContext("2d");
    // 确定绘图模式 fill 填充模式 stroke  描边模式
    // 指定线宽 lineWidth

    // 画笔移动到100, 200
    // c1.moveTo(100, 200);

    // 建立一个点到200, 100, 并在上个点之间实现一条直线, 如果没有上一个点,则等同于 moveTo方法
    // c1.lineTo(200, 100);

    // 添加一个 100,200 100+300, 200, 100, 200 + 400, 100 + 300, 200 + 400 的矩形,并回到 100, 200 点上
    // c1.rect(100, 200, 300, 400);

    // var radius, startAngle, endAngle, anticClock;
    // 画一条到100,300的直线,然后依据radius半径, startAngle开角, endAngle闭角,画弧线, anticClock true表示逆时针,false表示顺时针
    // c1.arc(100, 300, radius, startAngle, endAngle, anticClock);

    // var x1, y1, x2, y2;
    // 画出一条点到x1,y1的直线和x1,y1到x2,y2直线间半径为radius的弧形
    // c1.arcTo(x1, y1, x2, y2, radius);

    var width = painter.width;
    var height = painter.height;

    c1.moveTo(0, 0);
    c1.lineTo(width, height);
    c1.lineWidth = 6;
    c1.strokeStyle = "red";
    c1.stroke();

    var p2 = document.getElementById("c2");
    var c2 = p2.getContext("2d");
    var pts = [[30, 100], [300, 100], [300, 50], [350, 130], [300, 210], [300, 160], [30, 160]]
    c2.strokeStyle = "blue";
    c2.lineWidth = 2;
    c2.moveTo(pts[0][0], pts[0][1]);
    for (var i = 1; i < pts.length; i++) {
      c2.lineTo(pts[i][0], pts[i][1]);
    }
    c2.closePath();
    c2.stroke();

  </script>
</body>

</html>